<!DOCTYPE html>
<html lang="en">
<head th:include="/include::head">
	<style type="text/css">
	  body {
		padding-bottom: 40px;
	  }
	  .sidebar-nav {
		padding: 9px 0;
	  }
	</style>
</head>

<body>
	<!-- topbar starts -->
	<div th:substituteby="/include::header"></div>
	<!-- topbar ends -->
		<div class="container-fluid">
		<div class="row-fluid">
			<div th:substituteby="/include::items"></div>
			
			<noscript>
				<div class="alert alert-block span10">
					<h4 class="alert-heading">Warning!</h4>
					<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
				</div>
			</noscript>
			
			<div id="content" class="span10">
			<!-- content starts -->
			

			<div>
				<ul class="breadcrumb">
					<li>
						<a href="#">Home</a> <span class="divider">/</span>
					</li>
					<li>
						<a href="#">ManagerUsers</a>
					</li>
				</ul>
			</div>
			
			<div class="row-fluid">
				<div class="box span12">
					<div class="box-header well">
						<h2><i class="icon-info-sign"></i>User List</h2>
						<div class="box-icon">
							<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
							<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
							<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
						</div>
					</div>
					<div class="box-content">
						<a href="#" class="btn btn-success" th:href="@{/user}">Add</a>
						<a id="removeBtn" href="#" class="btn btn-success" th:href="@{/user}">Remove</a>
						<table class="table table-striped table-bordered">
						  <thead>
							  <tr>
								  <th>Username</th>
								  <th>Real Name</th>
								  <th>Role</th>
								  <th>Status</th>
								  <th>Actions</th>
							  </tr>
						  </thead>  
						    <tbody>
							<tr th:each="user:${pageModel.list}">
								<td th:text="${user.username}">David R</td>
								<td th:text="${user.realName}">2012/01/01</td>
								<td>
									<span  th:each="role:${user.roles}" th:text="${role.authority}"></span>
								</td>
								<td class="center">
									<span class="label label-success" th:if="${user.activated}">Active</span>
									<span class="label label-success" th:unless="${user.activated}">Active</span>
								</td>
								<td class="center">
									<a class="btn btn-success" href="#">
										<i class="icon-zoom-in icon-white"></i>  
										View                                            
									</a>
									<a class="btn btn-info" href="#">
										<i class="icon-edit icon-white"></i>  
										Edit                                            
									</a>
									<a class="btn btn-danger" href="#">
										<i class="icon-trash icon-white"></i> 
										Delete
									</a>
								</td>
							</tr>
							</tbody>
						  </table>
						 <div class="pagination pagination-centered">
						  <ul>
							<li><a th:href="@{/users(page=${pageModel.pageNumber}-1)}" th:if="${pageModel.hasPreviousPage()}">Prev</a></li>
							<li th:each="pageNum:${pageModel.navigatePageNumbers}" th:class="${pageModel.pageNumber==pageNum} ? 'active'"><a href="#"  th:text="${pageNum}" th:href="@{/users(page=${pageNum})}" >1</a></li>
							<li><a th:href="@{/users(page=${pageModel.pageNumber}+1)}" th:if="${pageModel.hasNextPage()}">Next</a></li>
						  </ul>
						</div>   
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- content ends -->
			</div><!--/#content.span10-->
		</div><!--/fluid-row-->
				
	<hr/>

	</div><!--/.fluid-container-->

	<footer th:substituteby="/include :: footer"></footer>
	<section id="scripts">
    	<section th:include="/include :: required_scripts"/>
	</section>	
</body>
</html>
